<template>
	<view class="home ff-color-fff ff-padding-bottom-25">
		<view class="home-headerInfo ff-flex-around ff-text-center">
			<view>
				<view class="ff-color-C8DBFE">累计项目</view>
				<u-count-to :start-val="0" :end-val="superviseProjectReportList.projectNum*1" :duration="2000"
					:use-easing="true" bold="true" color="#fff" font-size="54"></u-count-to>
			</view>
			<view>
				<view class="ff-color-C8DBFE">进行中的项目</view>
				<u-count-to :start-val="0" :end-val="superviseProjectReportList.doingProjectNum*1" :duration="2000"
					:use-easing="true" bold="true" color="#fff" font-size="54"></u-count-to>
			</view>
			<view v-if="false">
				<view class="ff-color-C8DBFE">执业中的人员</view>
				<u-count-to :start-val="0" :end-val="superviseProjectReportList.doingPeopleNum*1" :duration="2000"
					:use-easing="true" bold="true" color="#fff" font-size="54"></u-count-to>
			</view>
		</view>
		<view class="home-contentInfo ff-bg-fff ff-color-333">
			<view class="ff-relative">
				<view class="ff-flex ff-align-items-1 ff-flex-between">
					<view class="home-contentInfo-title ff-bg-F3F7FF">
						<view class="ff-align-items">
							<image
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/super-home-icon1.png"
								mode="">
							</image>
							<view class="ff-font-15 ff-margin-left-5">
								社会单位总览
							</view>
						</view>
					</view>
					<view v-if="false" @click="infoClick(1)"
						class="ff-padding-right-15 ff-flex ff-align-items-1 ff-font-13 ff-color-666">
						<u-icon name="info-circle" color="#3178FF" size="31"></u-icon>
						<view class="ff-margin-left-3">数据更新规则</view>
					</view>
				</view>
				<view class="ff-padding-15 home-contentInfo-content ff-flex-between ff-flex">
					<view @click.stop="companyClick(1)" class="ff-border-radius-10 ff-bg-F3F7FF">
						<view class="ff-margin-bottom-7">
							<image
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/super-home-icon2.png"
								mode="">
							</image>
						</view>
						<u-count-to :start-val="0" :end-val="superviseProjectReportList.companyNum*1" :duration="2000"
							:use-easing="true" bold="true" color="#333" font-size="44"></u-count-to>
						<view class="ff-font-13 ff-margin-top-8">社会单位总数</view>
					</view>
					<view @click.stop="companyClick(3)" class="ff-border-radius-10 ff-bg-F3F7FF">
						<view class="ff-margin-bottom-7">
							<image
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/super-home-icon4.png"
								mode="">
							</image>
						</view>
						<u-count-to :start-val="0" :end-val="superviseProjectReportList.onlineCompanyNum*1"
							:duration="2000" :use-easing="true" bold="true" color="#333" font-size="44"></u-count-to>
						<view class="ff-font-13 ff-margin-top-8">已上线单位</view>
					</view>
					<view @click.stop="companyClick(2)" class="ff-border-radius-10 ff-bg-F3F7FF">
						<view class="ff-margin-bottom-7">
							<image
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/super-home-icon3.png"
								mode="">
							</image>
						</view>
						<u-count-to :start-val="0" :end-val="superviseProjectReportList.offlineCompanyNum*1"
							:duration="2000" :use-easing="true" bold="true" color="#333" font-size="44"></u-count-to>
						<view class="ff-font-13 ff-margin-top-8">未上线单位</view>
					</view>
				</view>
			</view>
			<view class="lines"></view>
			<view class="ff-relative ff-bg-fff ff-color-333">
				<view class="ff-flex ff-flex-between ff-align-items-1">
					<view class="home-contentInfo-title ff-bg-F3F7FF" style="border-top-left-radius: 0;">
						<view class="ff-align-items">
							<image
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/super-home-icon5.png"
								mode="">
							</image>
							<view class="ff-font-15 ff-margin-left-5">
								本月单位维保情况
							</view>
						</view>
					</view>
					<view @click="infoClick(2)"
						class="ff-padding-right-15 ff-flex ff-align-items-1 ff-font-13 ff-color-666">
						<u-icon name="info-circle" color="#3178FF" size="31"></u-icon>
						<view class="ff-margin-left-3">统计规则</view>
					</view>
				</view>

				<view class="home-contentInfo-content1 ff-padding-15 ff-flex-between">
					<view @click.stop="reportClick(2)"
						class="ff-border-radius-10 ff-bg-F3F7FF ff-flex ff-align-items-1">
						<image class="ff-margin-right-10"
							src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/super-home-icon6.png"
							mode=""></image>
						<view>
							<u-count-to :start-val="0"
								:end-val="superviseProjectCompanyMonthStat.notMaintenanceCompanyNum*1" :duration="2000"
								:use-easing="true" bold="true" color="#333" font-size="44"></u-count-to>
							<view class="ff-font-13 ff-margin-top-8">本月未维保单位</view>
						</view>
					</view>
					<view @click.stop="reportClick(3)"
						class="ff-border-radius-10 ff-bg-F3F7FF ff-flex ff-align-items-1">
						<image class="ff-margin-right-10"
							src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/super-home-icon7.png"
							mode=""></image>
						<view>
							<u-count-to :start-val="0"
								:end-val="superviseProjectCompanyMonthStat.maintenanceCompanyNum*1" :duration="2000"
								:use-easing="true" bold="true" color="#333" font-size="44"></u-count-to>
							<view class="ff-font-13 ff-margin-top-8">本月已维保单位</view>
						</view>
					</view>
				</view>
				<view class="home-contentInfo-content2 ff-flex-between ff-flex">
					<view @click.stop="reportClick(4)" class="ff-border-radius-10 ff-bg-F3F7FF">
						<view class="ff-margin-bottom-7">
							<image
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/super-home-icon8.png"
								mode="">
							</image>
						</view>
						<u-count-to :start-val="0" :end-val="superviseProjectCompanyMonthStat.noSignNum*1"
							:duration="2000" :use-easing="true" bold="true" color="#333" font-size="44"></u-count-to>
						<view class="ff-font-13 ff-margin-top-8">本月未签章报告书</view>
					</view>
					<view @click.stop="reportClick(5)" class="ff-border-radius-10 ff-bg-F3F7FF">
						<view class="ff-margin-bottom-7">
							<image
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/super-home-icon9.png"
								mode="">
							</image>
						</view>
						<u-count-to :start-val="0" :end-val="superviseProjectCompanyMonthStat.signingNum*1"
							:duration="2000" :use-easing="true" bold="true" color="#333" font-size="44"></u-count-to>
						<view class="ff-font-13 ff-margin-top-8">本月签章中报告书</view>
					</view>
					<view @click.stop="reportClick(6)" class="ff-border-radius-10 ff-bg-F3F7FF">
						<view class="ff-margin-bottom-7">
							<image
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/super-home-icon10.png"
								mode="">
							</image>
						</view>
						<u-count-to :start-val="0" :end-val="superviseProjectCompanyMonthStat.signedNum*1"
							:duration="2000" :use-easing="true" bold="true" color="#333" font-size="44"></u-count-to>
						<view class="ff-font-13 ff-margin-top-8">本月已签章报告书</view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
		<!-- 自定义弹窗 -->
		<f-showModel @setVisible="setVisible" :customShowModal.sync="customShowModal" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 监管项目单位报告统计数据
				superviseProjectReportList: {
					projectNum: 0,
					doingProjectNum: 0,
					doingPeopleNum: 0,
					companyNum: 0,
					signReportNum: 0,
					onlineCompanyNum: 0,
					offlineCompanyNum: 0
				},
				// 本月维保情况
				superviseProjectCompanyMonthStat: {
					notMaintenanceCompanyNum: 0,
					maintenanceCompanyNum: 0,
					noSignNum: 0,
					signingNum: 0,
					signedNum: 0
				},
				// 自定义弹窗内容
				customShowModal: {
					visible: false, // 显隐
					title: '', // 标题,
					content: '', // 内容,
					content1: '', // 内容,
					cancelText: '', // 取消按钮文案,
					confirmText: '好的', // 确定按钮文案
				}
			}
		},
		onLoad() {
			this.getSuperviseProjectCompanyReportStat() // 获取监管项目单位报告统计数据
			this.getSuperviseProjectCompanyMonthStat() // 获取监管项目单位报告月度统计数据
		},
		methods: {
			// 打开数据规则弹窗
			infoClick(e) {
				if (e == 1) {
					this.customShowModal.visible = true
					this.customShowModal.title = '数据更新规则'
					this.customShowModal.content = '因数据量巨大，本页统计的数值均默认展示截止至昨日的数据，次日凌晨会自动更新今天产生的新数据。'
					this.customShowModal.content1 = '如需查看某单位的最新数据，可通过单位详情页，更新该单位的最新数据。'
				} else if (e == 2) {
					this.customShowModal.visible = true
					this.customShowModal.title = '统计规则'
					this.customShowModal.content = '本模块仅统计当前月份已上线的单位，未上线的单位不在统计范围内。'
					this.customShowModal.content1 = ''
				}
			},
			// 关闭弹窗
			setVisible() {
				this.customShowModal.visible = false
			},
			// onShow监听刷新
			async showLoading() {
				this.getSuperviseProjectCompanyReportStat() // 获取监管项目单位报告统计数据
				this.getSuperviseProjectCompanyMonthStat() // 获取监管项目单位报告月度统计数据
			},
			// 下拉刷新
			downLoading() {
				this.getSuperviseProjectCompanyReportStat() // 获取监管项目单位报告统计数据
				this.getSuperviseProjectCompanyMonthStat() // 获取监管项目单位报告月度统计数据
				setTimeout(() => {
					// that.$refs.uToast.show({
					// 	title: '刷新成功',
					// 	type: 'success'
					// });
					uni.stopPullDownRefresh(); // 停止刷新
				}, 100);
			},
			// 获取监管项目单位报告统计数据
			async getSuperviseProjectCompanyReportStat() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.get({
					url: '/supervise/superviseProjectCompanyReportStat'
				})
				// console.log('获取监管项目单位报告统计数据', data)
				this.$refs.loading.closeLoading();
				if (data.code == 200) {
					this.superviseProjectReportList = data.data;
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
			},
			// 获取监管项目单位报告月度统计数据
			async getSuperviseProjectCompanyMonthStat() {
				const date = new Date()
				let year = date.getFullYear() //年
				// 获取当前月份（需要加1，因为getMonth返回的月份是从0开始计数的）
				let month = date.getMonth() + 1 //月
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.post({
					url: '/supervise/superviseProjectCompanyMonthStat',
					data: {
						month: `${year}-${month}`
					}
				})
				// console.log('获取监管项目单位报告月度统计数据', data)
				this.$refs.loading.closeLoading();
				if (data.code == 200) {
					this.superviseProjectCompanyMonthStat = data.data;
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
			},
			// 点击跳转单位页面
			companyClick(type) {
				let text = ''
				if (type == 2) {
					text = '未上线'
				} else if (type == 3) {
					text = '已上线'
				}
				this.$emit('companyClick', text)
			},
			// 点击跳转报告书页面
			reportClick(type) {
				// console.log(type)
				let text = ''
				if (type == 2) {
					text = '本月未维保'
					this.$emit('companyClick', '已上线')
				} else if (type == 3) {
					text = '本月已维保'
				} else if (type == 4) {
					text = '未签章'
				} else if (type == 5) {
					text = '签章中'
				} else if (type == 6) {
					text = '签章完成'
				}
				this.$emit('reportClick', text)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		&-headerInfo {
			padding-top: 80rpx;
			background: url('https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/super-homeBg.png')no-repeat;
			background-size: 100%;
			height: 335rpx;

			.ff-color-C8DBFE {
				color: #C8DBFE;
				margin-bottom: 20rpx;
				font-size: 26rpx;
			}
		}

		&-contentInfo {
			margin-top: -60rpx;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			// background: linear-gradient(to bottom, #C2D6FF, #fff 9%, #f5f5f5 100%);

			&-title {
				display: inline-block;
				padding: 28rpx 75rpx 28rpx 30rpx;
				border-top-left-radius: 30rpx;
				border-bottom-right-radius: 50rpx;

				image {
					width: 35rpx;
					height: 35rpx;
				}
			}

			&-content {

				image {
					width: 43rpx;
					height: 43rpx;
				}

				.ff-bg-F3F7FF {
					width: 212rpx;
					padding: 30rpx 23rpx;
				}
			}

			&-content1 {

				image {
					width: 70rpx;
					height: 70rpx;
				}

				.ff-bg-F3F7FF {
					width: 332rpx;
					padding: 30rpx 23rpx;
				}
			}

			&-content2 {
				padding: 0 30rpx 30rpx 30rpx;

				image {
					width: 70rpx;
					height: 70rpx;
				}

				.ff-bg-F3F7FF {
					width: 212rpx;
					padding: 30rpx 45rpx 30rpx 23rpx;
					line-height: 1.3;
				}
			}
		}
	}

	.lines {
		width: 1005;
		height: 30rpx;
		background-color: #f5f5f5;
	}
</style>